<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex">
					<div class="nav-li">
						<span>券金额大于</span>
						<el-input-number
							v-model="filterSelectVal.amount"
							controls-position="right"
							@change="
								val =>
									refresh({
										startCouponMoney: val
									})
							"
							:min="0"
							size="mini"
						></el-input-number>
					</div>
					<div class="nav-li">
						<span>月销量大于</span>
						<el-input-number
							v-model="filterSelectVal.monthSales"
							controls-position="right"
							@change="
								val =>
									refresh({
										startSale: val
									})
							"
							:min="0"
							size="mini"
						></el-input-number>
					</div>
					<div class="nav-li">
						<span>分类</span>
						<el-select
							size="mini"
							v-model="filterSelectVal.cid"
							clearable
							style="width: 120px"
							@change="
								cid1 => {
									refresh({
										cid1
									});
								}
							"
						>
							<el-option
								v-for="(item, index) in options.category"
								:key="index"
								:label="item.name"
								:value="item.id"
							></el-option>
						</el-select>
					</div>
					<div class="nav-li">
						<filterGstatus
							@change="
								val =>
									refresh({
										status: val
									})
							"
						></filterGstatus>
					</div>
				</div>
			</template>
			<template #slot-add>
				<el-button type="danger" size="mini" @click="addAccount()">录入商品</el-button>
				<!-- <el-button size="mini" @click="putWayGoods()">自动上品规则配置</el-button> -->
			</template>
			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
			<template #slot-delete="{scope}">
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>
			<template #table-column-goodInfo="{scope}">
				<jd-good-info :item="scope.row"></jd-good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<jd-coupon-info :item="scope.row"></jd-coupon-info>
			</template>
			<template #table-column-isDHh="{scope}">
				<div>
					<el-tag v-if="scope.row.isDhh == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-status="{scope}">
				<div>
					<el-tag v-if="!scope.row.status || scope.row.status == 1" type="success"
						>正常</el-tag
					>
					<el-tag type="info" v-if="scope.row.status == 2">已下架</el-tag>
				</div>
			</template>
			<template #table-column-isNine="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-platform="{scope}">
				{{ scope.row.source | dict_platform }}
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
		<!-- 自动上品 -->
		<el-dialog title="编辑" :visible.sync="putWayVisible">
			<div>
				<el-form :model="putWayForm" ref="putWay" label-width="200px">

					<el-form-item
						label="关键词屏蔽"
						prop="keyWords"
						:rules="{
							required: true,
							message: '请输入关键词',
							trigger: 'blur'
						}"
					>
						<el-row>
							<el-col :span="12">
								<el-input
									v-model="putWayForm.keyWords"
									type="textarea"
									autosize
								></el-input>
							</el-col>
						</el-row>
						<div>备注：请输入要屏蔽的的关键词并用英文逗号隔开</div>
					</el-form-item>
					<el-form-item
						label="佣金区间"
						prop="minCommissionRate"
						:rules="{
							required: true,
							message: '请输入佣金',
							trigger: 'blur'
						}"
					>
						<el-row :gutter="20">
							<el-col :span="4">
								<el-input v-model="putWayForm.minCommissionRate" size="mini"></el-input>
							</el-col>
							<el-col :span="4"
								><el-input v-model="putWayForm.maxCommissionRate" size="mini"></el-input
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="券后价区间"
						prop="minEndPrice"
						:rules="{
							required: true,
							message: '请输入券后价',
							trigger: 'blur'
						}"
					>
						<el-row :gutter="20">
							<el-col :span="4"
								><el-input v-model="putWayForm.minEndPrice" size="mini"></el-input
							></el-col>
							<el-col :span="4"
								><el-input v-model="putWayForm.levelOneEndPrice" size="mini"></el-input
							></el-col>
							<el-col :span="4"
								><el-input v-model="putWayForm.levelTwoEndPrice" size="mini"></el-input
							></el-col>
							<el-col :span="4"
								><el-input v-model="putWayForm.maxEndPrice" size="mini"></el-input
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="补贴金区间"
						prop="minCommissionRate"
						:rules="{
							required: true,
							message: '请输入补贴金区间',
							trigger: 'blur'
						}"
					>
						<el-row :gutter="20">
							<el-col :span="4">
								<el-input v-model="putWayForm.minTljMoney" size="mini"></el-input>
							</el-col>
							<el-col :span="4"
								><el-input v-model="putWayForm.maxTljMoney" size="mini"></el-input
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="上品上限"
						prop="limitSum"
						:rules="{
							required: true,
							message: '请输入上品上限',
							trigger: 'blur'
						}"
					>
						<el-row :gutter="20">
							<el-col :span="4">
								<el-input v-model="putWayForm.limitSum" size="mini"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="补贴金比例"
						prop="tljRate"
						:rules="{
							required: true,
							message: '请输入补贴金比例',
							trigger: 'blur'
						}"
					>
						<el-row>
							<el-col :span="4"
								><el-input type="number" :min="0" :max="1" v-model="putWayForm.tljRate" size="mini"></el-input
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="抓取类目数量">
						<el-row>
							<el-col :span="4">
								<el-button @click="openForm_CRUD">请选择类目</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<el-button size="mini" @click="savePutWay">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import JdGoodInfo from './components/list/jd-good-info';
import JdCouponInfo from './components/list/jd-coupon-info';
import filterGstatus from './components/filterGstatus';
import openCurd from './components/openFormBwbt2';
import { platform } from '@/dict/index';
export default {
	data() {
		return {
			crud: null,
			platform: platform,
			platformIndex: '',
			mail: '',
			dou: '',
			filterSelectVal: {
				amount: 0, //劵金额
				monthSales: 0, //月销量
				isNine: '',
				isDouGoods: '',
				cid: ''
			},
			enterGoodsInfo: {},
			options: {
				category: []
			},
			putWayVisible: false,
			putWayForm: {
				levelOneEndPrice: '',
				levelTwoEndPrice: '',
				minTljMoney: '', //最低补贴金
				maxTljMoney: '',
				keyWords: '',
				minCommissionRate: '', // 佣金
				maxCommissionRate: '',
				minEndPrice: '', // 券后价
				maxEndPrice: '', // 券后价
				limitSum: '', //上品上线
				tljRate: 0 // 补贴金比例
			}
		};
	},
	components: {
		JdGoodInfo,
		JdCouponInfo,
		filterGstatus
	},

	created() {
		this.$service.goodsMenagement.jd.category().then(res => {
			res.unshift({
				name: '全部',
				id: null
			});
			this.options.category = res;
		});
	},

	methods: {
		submitForm(formData) {
			this.crud.setForm('data', formData);
			this.crud.submit();
		},
		setGoodsort(item) {
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '80px',
					width: '570px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						value: item.pic,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						value: item.title,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'ysqLevel',
						label: '排序值',
						span: 24,
						value: item.ysqLevel ? item.ysqLevel : 100,
						component: {
							name: 'ysqlevel-input',
							data() {
								return {
									value2: 0
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div style="display:flex">
										<el-input-number
											controls-position="right"
											min={1}
											max={100000}
											onInput={this.input}
											v-model={this.value2}></el-input-number>
										<span style="color:red;margin-left:10px">
											* 序号越大，排序越靠前
										</span>
									</div>
								);
							}
						},
						rules: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
					},
					{
						prop: 'status',
						label: '是否上架',
						span: 12,
						value: item.status,
						component: {
							name: 'el-input-number1',
							attrs: {
								'controls-position': 'right',
								min: 1,
								max: 10000
							},
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							methods: {
								change(e) {
									console.log(e);
									this.$emit('input', e);
								}
							},
							mounted() {
								this.value2 = this.value;
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>上架</el-radio>
										<el-radio label={0}>下架</el-radio>
									</el-radio-group>
								);
							}
						},
						rules: [{ required: true, message: '免单总数不能为空', trigger: 'blur' }]
					}
				],
				on: {
					submit({ data, close }) {
						self.$service.goodsMenagement.goods
							.updateGoods({
								...data,
								id: item.gid
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.jd)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'left',
							'min-width': 300
						},
						{
							label: '优惠券信息',
							prop: 'couponInfo',
							align: 'left',
							'min-width': 200
						},
						{
							label: '月销量',
							prop: 'inOrderCount30Days',
							align: 'center',
							sortable: 'custom',
							'default-sort': 'descending',
							emptyText: '无',
							'min-width': 100
						},
						{
							label: '佣金比例',
							prop: 'commissionShare',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100
						},
						{
							label: '排序',
							prop: 'recommend',
							align: 'center',
							'min-width': 100,
							sortable: true
						},
						{
							label: '是否下架',
							prop: 'status',
							align: 'center',
							'min-width': 100
						}
					],

					op: {
						props: {
							width: 120
						},
						layout: ['edit']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '80px',
						width: '500px'
					},
					items: [
						{
							label: '商品链接',
							prop: 'url',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写商品链接'
								}
							},
							rules: [{ required: true, message: '商品链接不能为空' }]
						},
						{
							prop: 'recommend',
							label: '排序',
							value: 0,
							span: 12,
							component: {
								name: 'el-input-number'
							}
						},
						{
							span: 12,
							props: {
								'label-width': '10px'
							},
							component: (
								<span style="color:red;font-size:12px">* 序号越大，排序越靠前</span>
							)
						},
						{
							prop: 'status',
							label: '状态',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '上架',
										value: 1
									},
									{
										label: '下架',
										value: 2
									}
								]
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'slot-add', 'query', 'flex1', 'search-key'],
					['slot-filter'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', (isEdit, data) => {
					if (isEdit) {
						data.url = data.materialUrl;

						if (!data.url.includes('http')) {
							data.url = 'https://' + data.url;
						}
					}
				})
				.on('close', isOpen => {
					if (!isOpen) {
						this.enterGoodsInfo = {};
					}
				})
				.on('submit', (isEdit, data, { next }) => {
					next({
						id: data.id,
						url: data.url,
						recommend: data.recommend,
						status: data.status
					});
				})
				.on('refresh', async (params, { next }) => {
					if (params.isNine === '') {
						delete params.isNine;
					}
					if (params.isDhh === '') {
						delete params.isDhh;
					}
					let { list } = await next(params);
					list.map(item => {
						item.commissionRate = (item.commissionRate || 0) + '%';
						item.sale = item.sale + '件';
					});
				})
				.done();

			app.refresh({
				status: 1,
				prop: 'recommend',
				order: 'desc'
			});
		},
		// 录入商品
		addAccount() {
			this.crud.add();
		},
		refresh(data) {
			this.crud.refresh(data);
		},
		// 配置自动上品
		putWayGoods() {
			this.$service.goodsMenagement.bwbtConfig.jdYzf().then(res => {
				this.putWayForm = res.config
				console.log(this.putWayForm);
				this.putWayVisible = true;
			})			
		},
		openForm_CRUD() {
			this.$refs['cl-form'].open({
				props: {
					title: '查看分类',
					width: '800px',
					size: 'mini'
				},
				op: {
					confirmButtonText: '保存',
					cancelButtonText: '关闭',

					layout: ['cancel'] // 同crud下的layout
				},
				items: [
					{
						prop: '104',
						value: 104,
						component: openCurd
					}
				]
			});
		},
		savePutWay() {
			this.$service.goodsMenagement.bwbtConfig.updateJdYzf(this.putWayForm).then(res => {
				this.$message.success('保存成功！')
				this.putWayVisible = false
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.nav {
	padding: 10px 0;
	font-size: $font12;
	::v-deep .el-input-number.is-controls-right .el-input__inner {
		padding-left: 15px;
		padding-right: 20px;
	}
	::v-deep .el-input-number--mini {
		width: 71px;
	}
	.nav-li {
		margin-right: 20px;
		span {
			color: $text-grey;
			margin-right: 10px;
		}
		.el-select {
			width: 90px;
		}
		.el-input-number--mini {
			width: 100px;
		}
	}
}
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
</style>
